<html>
<head>

<link rel="stylesheet" type="text/css"
	href="../../../../dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
	href="../../../../dijit/themes/claro/claro.css" />

<script type="text/javascript">
	var djConfig = {
		parseOnLoad : true
	};
</script>

<!--  Google API -->
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>

<!-- Virtual Earth -->
<script
	src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3'></script>

<!-- Yahoo -->
<script
	src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>

<!-- hosted version -->
<script type="text/javascript"
	src="http://openlayers.org/api/2.10/OpenLayers.js"></script>
<script type="text/javascript" src="../../../../dojo/dojo.js"></script>
<script>
	require([ "dojo/ready", 
	        "dojo/_base/array", 
	        "dojo/_base/connect", 
	        "dojo/aspect", 
	        "dijit/registry", 
	        "dojo/_base/lang",
			"dojox/geo/openlayers/widget/Map", 
			"dijit/layout/ContentPane", 
			"dijit/layout/BorderContainer", 
			"dojo/parser" ],
			function(ready, arr, connect, aspect, WidgetRegistry, lang, Map) {

				var maps = [ "osm", "google", "yahoo", "arcGis", "virtualEarth" ];

				ready(function() {
					arr.forEach(maps, function(map) {
						var m = WidgetRegistry.byId(map);
						connect.connect(m.map.olMap, "setCenter", m, update);
					});
				});

				var _updating = false;

				function update(center, zoom, dragging, forceZoomChange) {
					if (dragging)
						return;
					if (_updating)
						return;

					var from = this.map.olMap.getProjectionObject();
					var to = dojox.geo.openlayers.EPSG4326;
					var p = {
						x : center.lon,
						y : center.lat
					};
					OpenLayers.Projection.transform(p, from, to);
					_updating = true;
					arr.forEach(maps, function(map) {
						var m = WidgetRegistry.byId(map);
						if (m != this) {
							from = dojox.geo.openlayers.EPSG4326;
							to = m.map.olMap.getProjectionObject();
							var c = lang.mixin({}, p);
							OpenLayers.Projection.transform(c, from, to);
							m.map.olMap.setCenter(new OpenLayers.LonLat(c.x, c.y));
						}
					});
					_updating = false;
				}
			});
</script>

<style type="text/css">
.olLayerGoogleCopyright {
	visibility: hidden;
}
</style>

</head>
<body class="claro">
	<div data-dojo-type="dijit.layout.BorderContainer" design="headline"
		style="height: 100%; width: 100%;">

		<div data-dojo-type="dijit.layout.ContentPane" region="top"
			style="height: 200px;" splitter="true">
			<div data-dojo-type="dojox.geo.openlayers.widget.Map" baseLayerType="OSM"
				initialLocation="{
    position : [7.154126, 43.651748],
    extent : 0.2 }"
				id="osm"></div>

		</div>

		<div data-dojo-type="dijit.layout.ContentPane" region="center">
			<div data-dojo-type="dojox.geo.openlayers.widget.Map"
				baseLayerType="Google"
				initialLocation="{
    position : [7.154126, 43.651748],
    extent : 0.2 }"
				id="google"></div>
		</div>

		<div data-dojo-type="dijit.layout.ContentPane" region="bottom"
			style="height: 200px;" splitter="true">
			<div data-dojo-type="dojox.geo.openlayers.widget.Map" baseLayerType="Yahoo"
				initialLocation="{
    position : [7.154126, 43.651748],
    extent : 0.2 }"
				id="yahoo"></div>
		</div>

		<div data-dojo-type="dijit.layout.ContentPane" region="left"
			style="width: 200px;" splitter="true">
			<div data-dojo-type="dojox.geo.openlayers.widget.Map"
				baseLayerType="ArcGIS"
				initialLocation="{
    position : [7.154126, 43.651748],
    extent : 0.2 }"
				id="arcGis"></div>
		</div>

		<div data-dojo-type="dijit.layout.ContentPane" region="right"
			style="width: 200px;" splitter="true">
			<div data-dojo-type="dojox.geo.openlayers.widget.Map"
				baseLayerType="VirtualEarth"
				initialLocation="{
    position : [7.154126, 43.651748],
    extent : 0.2 }"
				id="virtualEarth"></div>
		</div>

	</div>
</body>
</html>

